<template>
  <view>
    <view class="m-tab">
      <view class="m-navbar">
        <view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="level1">
          {{ sprintf(__('一级粉丝(%s)'), numFan1) }}
        </view>
        <view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']" @click="level2">
          {{ sprintf(__('二级粉丝(%s)'), numFan2) }}
        </view>
        <view :class="['m-navbar-item', tapindex==3?'m-navbar-item-on':'']" @click="level3" v-if="isDistLevel3">
          {{ sprintf(__('三级粉丝(%s)'), numFan3) }}
        </view>
      </view>
    </view>

    <scroll-view class="m-scrollBox" scroll-y="true" @scrolltolower="scrollbottom" v-if="(UserFans.length>0)">
      <view class="m-panel-bd">
        <view v-for="(item, index) in UserFans" :key="index" class="m-media-box m-media-box-appmsg">
          <view class="m-media-box-hd">
            <image lazy-load class="m-media-box-thumb" :src="(item.user_avatar)"/>
          </view>
          <view class="m-media-box-bd">
            <label class="m-media-box-title">{{ item.user_nickname }}</label><label class="m-media-box-level"
                                                                                    v-if="item.user_level_name">{{ item.user_level_name }}</label><label
              class="m-media-box-num">{{ __('收益：') }}
            <text>{{ __('￥') }}{{ mf(item.ugc_amount, 2) }}</text>
          </label>
            <view class="m-media-box-info">
              <view class="m-media-box-info-meta m-tiem">{{ item.user_time_str }}</view>
              <view class="m-media-box-info-meta m-num" v-if="item.ugc_level != 1">
                {{ __('来源:') }}{{ item.parent_nickname || __('已注销') }}
              </view>

              <view class="m-media-box-info-meta m-num" v-if="false">LV{{ item.ugc_level }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="m-loading-box">
        <block v-if="(ispage)">
          <view class="u-loadmore">
            <label class="u-loading"></label>
            <text class="u-loadmore-tips">{{ __('正在加载') }}</text>
          </view>
        </block>
        <block v-else>
          <view class="u-loadmore u-loadmore-line">
            <text class="u-loadmore-tips">{{ __('没有更多数据啦！') }}</text>
          </view>
        </block>
      </view>
    </scroll-view>
    <view class="m-nullcontent" v-else>
      <view class="m-nullpage-middle">
        <label class="iconfont icon-meiyougengduo"></label>
        <view class="m-null-tip">
          <text>{{ __('亲~什么都没有') }}</text>
          <text>{{ __('赶快去圈粉吧') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapMutations, mapState} from 'vuex'


export default {
  data() {
    return {
      page: 1, tapindex: 1, ispage: true, flag: true, UserFans: [], numFan1: 0, numFan2: 0, numFan3: 0,
      isDistLevel3: true
    };
  },

  computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__('我的粉丝')
    });

    this.getFunNum();

    this.setData({UserFans: []}), this.getFunlist();
    let that = this;

    // #ifdef MP-WEIXIN
    this.isDistLevel3 = false;
    // #endif


    // #ifdef H5
    if (this.$.isWeixin()) {
      this.isDistLevel3 = false;
    }
    // #endif
  },
  methods: {
    ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

    level1: function () {
      this.setData({tapindex: 1, UserFans: [], page: 1}), this.getFunlist()
    },
    level2: function () {
      this.setData({tapindex: 2, UserFans: [], page: 1}), this.getFunlist()
    },
    level3: function () {
      this.setData({tapindex: 3, UserFans: [], page: 1}), this.getFunlist()
    },

    getFunNum: function () {
      var params = {},
          that = this;
      that.$.request({
        url: this.Config.URL.fx.get_commission_order_num,
        data: params,
        success: function (data, status, msg, code) {
          that.setData({
            numFan1: data.user_fans.level_1,
            numFan2: data.user_fans.level_2,
            numFan3: data.user_fans.level_3,
          });
        }
      });
    },
    getFunlist: function () {
      var params = {page: this.page, ugc_level: this.tapindex},
          that = this;
      that.$.request({
        url: this.Config.URL.fx.lists_commission,
        data: params,
        success: function (data, status, msg, code) {
          if (data.items.length > 0) {
            for (var r = 0; r < data.items.length; r++) {
              data.items[r]['user_time_str'] = that.$.formatDateFormatter(data.items[r]['user_time']);
            }

            if (data.page >= data.total) {
              that.setData({
                UserFans: that.UserFans.concat(data.items),
                flag: false,
                ispage: false
              });
            } else {
              that.setData({
                UserFans: that.UserFans.concat(data.items),
                flag: true,
                ispage: true
              })
            }
          } else {
            that.setData({flag: false, ispage: false})
          }
        }
      });

    },
    scrollbottom: function () {
      if (this.flag) {
        var e = this;
        e.setData({flag: false}), clearTimeout(t);
        var t = setTimeout(function () {
          e.setData({page: parseInt(e.page) + 1}), e.getFunlist()
        }, 500)
      }
    }
  }
}
</script>

<style lang="scss">
@import "../../styles/_variables";

.m-panel-bd {
  background-color: #fff;
}

.m-media-box-num {
  float: right;
  font-size: 28rpx;
}

.m-media-box-num text {
  color: $default-skin-bg;
}

.m-scrollBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 70rpx;
}

.m-num {
  float: right;
  color: $default-skin-bg
}

.m-media-box-thumb {
  border-radius: 100%;
}

.m-tab {
  position: fixed;
  width: 100%;
  top: var(--window-top);
  z-index: 2;
}

.m-navbar-item {
  padding: 20rpx 0;
  font-size: 24rpx;
}

.m-navbar-item:after {
  border: none;
}

.m-navbar-item.m-navbar-item-on {
  background-color: #fff;
  color: $default-skin-bg;
}

.m-navbar-item.m-navbar-item-on::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 6rpx;
  border-bottom: 6rpx solid $default-skin-bg;
  color: #CCCCCC;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 3;
}


.m-media-box-info-meta {
  padding-right: 14rpx;
}

.m-media-box-level {

  font-size: .45rem;
  line-height: .6rem;
  background-color: #ff6700;
  height: .6rem;
  padding: 0 .1rem;
  margin-left: .2rem;
  border-radius: .1rem;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
  color: #fff;
}
</style>

